<template>
    <div>
        <div class="app-container">
            <TopInfo />
            <Search :lookup="data.lookup" @investigate="inves" />
            <div v-prmis="'action_video_add'">
                <el-button type="primary" @click="onEdit(1)">{{ $t('help.video.add') }}</el-button>
            </div>
        </div>

        <div class="app-container" v-loading="data.mtloading">
            <div class="w-64  inline-block ml-3 mb-3 border relative video" v-for="(item, index) in list" :key="index"
                @mousemove="downShadow(item)" @mouseleave="leaveShadow(item)">
                <div class="p-3">
                    <div class="text-center z-10">
                        <video class="h-40 w-64" :src="item.path" controls muted loop></video>
                        <p class="text-[#409EFF] cursor-pointer pt-1 pb-2" @click="onEdit(2, item)">{{ item.video_name
                            }} </p>
                    </div>
                    <div>
                        <p>{{ $t('source.creater') }}:
                            <span>{{ item.creator_nickname }}</span>
                        </p>
                        <p>{{ $t('public.date') }}：
                            <span>{{ getPlevel.gettime(item.create_time, 3) }}</span>
                        </p>
                        <p  class="relative overflow-hidden">
                            <span>{{$t('public.describe')}}：</span>
                            <span  class="absolute" :title="item.video_desc">{{ item.video_desc }}</span>
                        </p>
                        <p>{{ $t('help.video.tag') }}：
                            <el-tag v-if="item.tag" v-for="(item, index) in item.tag.split(',')" :key="index" class="mr-2">{{ item }}</el-tag>
                        </p>

                    </div>
                    <div v-if="item.isShadow" class="float-right text-[#409EFF] cursor-pointer leading-4"
                        @click="onDel(item.id)"><el-icon>
                            <Delete />
                        </el-icon></div>
                </div>
            </div>
            <PageNum :total="data.total" :page="info" @exposeData="current" @fraction="fraction" />
        </div>
        <el-dialog v-model="dialogVisible" :title="data.title" center width="35%">
            <el-form v-if="dialogVisible" :model="addInfo" label-width="100px">
                <span :class="language=='en'?'text-[red] absolute mt-2 ml-0':'text-[red] absolute mt-2 ml-1'">*</span>
                <el-form-item :label="$t('help.video.name')+':'" prop="error_code">
                    <el-input v-model.number="addInfo.video_name" :placeholder="$t('message.pleaseEnter')" style="width: 94%;" />
                </el-form-item>
                <el-form-item :label="$t('help.video.url')+':'" prop="path">
                    <el-input v-model="addInfo.path" type="text" readonly style="width: 94%;">
                        <template #append>
                            <Upload :list="{ 'data': 'adv', 'list': false }" :type="2" :uptype="2"
                                @exposeData="expose" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item :label="$t('help.video.tag')" prop="title" v-if="data.flag == 1">
                    <el-input v-model="addInfo.tag" :placeholder="$t('message.pleaseEnterTag')" class="input-with-select" style="width: 94%;"
                        multiple clearable filterable>
                    </el-input>
                </el-form-item>

                <el-form-item :label="$t('help.video.tag')" prop="title" v-else>
                    <el-select v-model="addInfo.tag" :placeholder="$t('message.pleaseSelect')" clearable filterable style="width: 94%;"
                        multiple>
                        
                        <el-option  v-for="item of tagList" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>

                <el-form-item :label="$t('help.video.desc')" prop="title">
                    <el-input v-model="addInfo.video_desc" style="width: 94%;" :rows="2" type="textarea"
                        :placeholder="$t('message.pleaseEnter')" />
                </el-form-item>
                <div class="w-full text-center">
                    <el-button type="primary" @click="onSave()">{{ $t('public.save')}}</el-button>
                    <el-button @click="dialogVisible = false">{{ $t('public.cancel')}}</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import getPlevel from "@/utils/level";
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { getvideoAdd, getvideoUpdate, getvideoList, getvideoDel, getTagList } from '@/api/system'
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
    language.value = locale.value
})
let data = reactive({
    mtloading: false, // 加载
    lookup: [ // 筛选栏
        { title: $t('help.video.name'), type: 'input', value: '', key: 'video_name' },
        { title: $t('help.video.tag'), type: 'define', value: '', select: [], key: 'tag' }
    ],
    title: '',
    flag: '',
    total: 0, // 总条数
})
let dialogVisible = ref(false)
let tagList = ref([])
let list = ref([])
let info = ref({
    video_name: '',
    tag: '',
    page: 1,
    pageNum: 15
})
let addInfo = ref({
    video_name: '',
    path: '',
    tag: '',
    id: '',
    video_desc: ''
})
let leaveShadow = (row) => {
    row.isShadow = false
}
let downShadow = (row) => {
    row.isShadow = true
}
// 上传返回
let expose = (e) => {
    if (e.status == 200) {
        addInfo.value.path = e.file.response.data
    } else {
        addInfo.value.path = '';
    }
};
let findTagList = () => {
    getTagList({}).then(res => {
        tagList.value = res.data.tag
        let arr = []
        for (let item in res.data.tag) {
            arr.push({
                label: res.data.tag[item],
                value: res.data.tag[item]
            })
        }
        data.lookup[1].select = arr
    })
}
let onSave = () => {
    if (!addInfo.value.video_name) {
        ElMessage({
            message: $t('message.videNameUnEmpty'),
            type: 'error'
        });
        return
    }
    if (data.flag == 1) {
        let pram = {
            video_name: addInfo.value.video_name,
            path: addInfo.value.path,
            video_desc: addInfo.value.video_desc
        }
        if(addInfo.value.tag){
            pram.tag = addInfo.value.tag
        }
        getvideoAdd(pram).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.addSuccess'),
                    type: 'success'
                });
                dialogVisible.value = false
                findlist()
                return;
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            });
        })
    }
    if (data.flag == 2) {
        let pram = {
            video_name: addInfo.value.video_name,
            path: addInfo.value.path,
            id: addInfo.value.id,
            tag :addInfo.value.tag.join(','),
            video_desc: addInfo.value.video_desc
        }
        getvideoUpdate(pram).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.modifySuccess'),
                    type: 'success'
                });
                dialogVisible.value = false
                findlist()
                return;
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            });
        })
    }

}
let onEdit = (e: any, row: any) => {
    if (e == 1) {
        data.flag = 1
        data.title = $t('help.video.add')
        addInfo.value.video_name = ''
        addInfo.value.path = ''
        addInfo.value.tag = ''
        addInfo.value.video_desc = ''
    }
    if (e == 2) {
        data.flag = 2
        data.title = $t('help.video.modify')
        addInfo.value.id = row.id
        addInfo.value.video_name = row.video_name
        addInfo.value.path = row.path
        addInfo.value.tag = row.tag.split(',')
        addInfo.value.video_desc = row.video_desc
    }
    dialogVisible.value = true
}
let onDel = (id: number) => {
    ElMessageBox.confirm($t('message.delData'))
        .then(res => {
            getvideoDel({ id: id }).then(res => {
                if (res.state == 200) {
                    ElMessage({
                        message: $t('message.delSuccess'),
                        type: 'success'
                    })
                    findlist()
                    return
                }
                ElMessage({
                    message: $t('message.networkFailed'),
                    type: 'error'
                })
            })
        }).catch(err => {
            console.log('取消')
        })
}
// 获取列表信息
let findlist = () => {
    data.mtloading = true
    getvideoList(info.value)
        .then((res) => {
            data.mtloading = false
            if (res.state == 200) {
                list.value = res.data.data;
                data.total = res.data.total
            }
        }).catch((err) => { });
};
// 查询回调
let inves = (e) => {
    info.value.video_name = e.video_name
    info.value.tag = e.tag
    info.value.page = 1
    info.value.pageNum = 15
    findlist()
}
// 页数回调
let current = (e) => {
    info.value.page = e
    findlist()
}
// 条数回调
let fraction = (e) => {
    info.value.pageNum = e
    findlist()
}
findlist()
findTagList()
</script>
<style lang="scss" scoped>
.video:hover {
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5);
}
</style>
